<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../js/laydate.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<title>请假管理</title>
<style type="text/css">
a{
	text-decoration:none;
}
#holidayQueryModel {
	width: 500px;
	height: 400px;
	z-index: 1000;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -300px;
	background: #fff;
	border: 1px solid rgba(39, 38, 38, 0.31);
	border-radius: 10px;
	padding: 15px;
	box-shadow: 2px 2px 5px #333333;
}

#holidayDivModel,#holidayModifyModel{
	width: 500px;
	height: 300px;
	z-index: 1000;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -300px;
	background: #fff;
	border: 1px solid rgba(39, 38, 38, 0.31);
	border-radius: 10px;
	padding: 15px;
	box-shadow: 2px 2px 5px #333333;
}

#starttime, #qstarttime, #empName, #c_time ,#mstarttime{
	border: 1px solid #DBDBDB;
	outline: none;
	border-radius: 5px;
}

#endtime, #qendtime ,#mendtime{
	border: 1px solid #DBDBDB;
	outline: none;
	border-radius: 5px;
}

#reasoninput, #qreasoninput ,#mreasoninput{
	resize: none;
	height: 65px;
	width: 435px;
	vertical-align: top;
	border: 1px solid #DBDBDB;
	outline: none;
	border-radius: 5px;
}

.xiala {
	border: 1px solid black;
	outline: none;
	border-radius: 2px;
}
</style>
</head>
<body>
	<div class="container" style="width: 100%; padding: 25px 15px;">
		<div class="row clearfix">
			<div class="col-md-12 column" style="padding: 20px;">
				<div style="float: left;">
					<input type="button" class="btn btn-primary btn"
						onclick="changeState()" value="我要请假" />
				</div>

				<input type="hidden"  id="a_type"  name="a_type" value="2"/>
				<!-- 请假申请窗口 -->
				<div id="holidayDivModel" style="display: none;">
					<form th:action="@{/holiday/createHolidayApply}"
						onsubmit="return validate_form(this);" method="post"
						id="addHoliday">
						<span style="margin-bottom: 5px;"></span>
						<table class='table table-hover'>
							<tr>
								<td>指定审批人： <select name="a_eid" id="a_eid" class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
								<td>请假类型: <select name="ht_id" id="ht_id" class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
							</tr>
							<tr>
								<td><span style="padding-left: 0px">开始时间:</span><input
									type="text" id="starttime" readonly="readonly" name="starttime"
									value="" autocomplete="off" /></td>
								<td>结束时间:<input readonly="readonly" type="text"
									id="endtime" name="endtime" value="" autocomplete="off" />
								</td>

							</tr>
							<tr>
								<td colspan="2">请假原因:<br /> <!-- <input type="text" name="reason" value="" style="height:80px;weight:100px"/> -->
									<textarea id="reasoninput" autocomplete="off" name="reason"></textarea>
								</td>

							</tr>
							<tr>
								<td><input type="submit" value="提交"
									class="btn btn-primary btn" style="margin-left: 80px;"
									onclick="if(confirm('确定提交?')==false)return false;" /></td>
								<td><input type="text" value="关闭"
									style="width: 54px; margin-left: 80px;"
									class="btn btn-primary btn" onclick="changeState()" /></td>
							</tr>
						</table>
					</form>
				</div>
				
				<!-- 请假修改窗口 -->
				<div id="holidayModifyModel" style="display: none;">
					<form
						onsubmit="return validate_modify(this);" method="post"
						id="modifyHoliday">
						<span style="margin-bottom: 5px;"></span>
						<input type="hidden" name=mh_id  id="mh_id" value=""/>
						<table class='table table-hover'>
							<tr>
								<td>指定审批人： <select name="ma_eid" id="ma_eid" class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
								<td>请假类型: <select name="mht_id" id="mht_id" class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
							</tr>
							<tr>
								<td><span style="padding-left: 0px">开始时间:</span><input
									type="text" id="mstarttime" readonly="readonly" name="mstarttime"
									value="" autocomplete="off" /></td>
								<td>结束时间:<input readonly="readonly" type="text"
									id="mendtime" name="mendtime" value="" autocomplete="off" />
								</td>

							</tr>
							<tr>
								<td colspan="2">请假原因:<br /> <!-- <input type="text" name="reason" value="" style="height:80px;weight:100px"/> -->
									<textarea id="mreasoninput" autocomplete="off" name="mreason"></textarea>
								</td>

							</tr>
							<tr>
								<td><input type=button value="修改"
									class="btn btn-primary btn" style="margin-left: 80px;"
									onclick="modifyHoliday()" /></td>
								<td><input type="text" value="关闭"
									style="width: 54px; margin-left: 80px;"
									class="btn btn-primary btn" onclick="changeMState()" /></td>
							</tr>
						</table>
					</form>
				</div>

				<!-- 请假查询窗口 -->
				<div id="holidayQueryModel" style="display: none;">
					<table class='table table-hover'>
						<tr>
							<!-- <td>按名字： <input type="text" name="empName" id="empName"
								value="" />
							</td> -->
							<td colspan="1">按请假类型: <br /> <select name="qht_id"
								id="qht_id" class="xiala">
									<option value="">请选择</option>
							</select>
							</td>
							<td colspan="1">按审批状态: <br /> <select name="aps_id"
								id="aps_id" class="xiala">
									<option value="">请选择</option>
									<option value="1">未审批</option>
									<option value="2">已通过</option>
									<option value="3">未通过</option></select></td>
						</tr>
						<tr>
							<td><span style="padding-left: 0px">从开始时间:</span><input
								type="text" id="qstarttime" readonly="readonly"
								name="qstarttime" value="" autocomplete="off" /></td>
							<td>到结束时间:<input readonly="readonly" type="text"
								id="qendtime" name="qendtime" value="" autocomplete="off" />
							</td>

						</tr>
						<tr>
							<td colspan="2">按请假原因关键字:<br /> <!-- <input type="text" name="reason" value="" style="height:80px;weight:100px"/> -->
								<textarea id="qreasoninput" autocomplete="off" name="qreason"></textarea>
							</td>



						</tr>
						<tr>
							<td colspan="2">按申请时间:<br /> 从<input readonly="readonly"
								type="text" name="c_time" id="c_time" style="width: 130px;" />至今
							</td>
						</tr>
						<tr>
							<td><input type="button" value="查询"
								onclick="showHolidays('1')" class="btn btn-primary btn"
								style="margin-left: 80px;" /></td>
							<td><input type="text" value="关闭"
								style="width: 54px; margin-left: 80px;"
								class="btn btn-primary btn" onclick="changeHolidayState()" /></td>
						</tr>
					</table>
				</div>
				<button type="button" class="btn btn-primary btn"
					onclick="changeHolidayState()" style="float: right;">查询</button>

				<div id="holidays" style=""></div>
				
			
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	//入口函数
	$(function() {
		//展示当前用户的请假信息
		showHolidays(1);
		//展示审批人
		showApprovalPersons();
		//展示请假类型
		showHolidayTypes();
	})
	
	
	//修改方法
	function modifyHoliday(){
		if(confirm('确定修改?')==false){
			return false;	
		}
		/* 检查格式 */
		var form11=document.getElementById("modifyHoliday")
		if((validate_modify(form11))==false){
			return false;
		}
		$.ajax({
			url:"/holiday/modifyHoliday",
			type:"POST",
			data:{
				a_eid:$("#ma_eid").val(),
				h_id:$("#mh_id").val(),
				ht_id:$("#mht_id").val(),
				starttime:$("#mstarttime").val(),
				endtime:$("#mendtime").val(),
				reason:$("#mreasoninput").val()
			},
			dataType:"json",
			success:function(data){
				alert(data);
				window.location.reload();
			},
			error:function(data){
				alert("修改假的失败");
			}
		});
	}
	
	//修改检查
	function validate_modify(thisform) {
		with (thisform) {
			if (validate_required(ma_eid, "审批人不能为空!") == false) {
				a_eid.focus();
				return false
			}
			if (validate_required(mht_id, "请假类型不能为空!") == false) {
				ht_id.focus();
				return false
			}
			if (validate_required(mstarttime, "开始时间不能为空!") == false) {
				starttime.focus();
				return false
			}
			if (validate_required(mendtime, "结束时间不能为空!") == false) {
				endtime.focus();
				return false
			}
			if (validate_required(mreasoninput, "请假原因不能为空!") == false) {
				reason.focus();
				return false
			}
			var startTime = $("#mstarttime").val();
			var endTime = $("#mendtime").val();
			var d1 = Date.parse(startTime);
			var d2 = Date.parse(endTime);
			var date = d2 - d1;
			var time = 60 * 60 * 1000;
			if (date < 0 || date < time) {
				alert("结束时间不能先于开始时间且间隔必须在一小时以上！");
				return false;
			}
		}
	}
	
	//打开修改窗口
	//需要存假期号 审批人id、需要类型、开始时间、结束时间、原因
	function openModifyView(h_id,a_eid,ht_id,starttime,endtime,reason){
		
		//关闭其他的窗口
		if(bc.style.display == 'block'){
			changeState();
		}
		if (queryHol.style.display == 'block') {
			queryHol.style.display = 'none';
		}
		if(modifyHol.style.display == 'none'){
			changeMState();
		}
		
		//给框框赋值
		$("#mh_id").val(h_id);
		$("#ma_eid").val(a_eid);
		$("#mht_id").val(ht_id);
		$("#mstarttime").val(starttime);
		$("#mendtime").val(endtime);
		$("#mreasoninput").val(reason);
		
		
	}
	
	//控制修改框的显示
	var modifyHol = document.getElementById("holidayModifyModel");
	function changeMState(){
		if (modifyHol.style.display == 'none') {
			modifyHol.style.display = 'block';
		} else {
			modifyHol.style.display = 'none';
		}
	}

	//删除方法
	function deleteHoliday(a_id) {
		if (confirm('确定删除?') == false) {
			return false;
		}
		$.ajax({
			url:"/holiday/deleteHoliday",
			type:"POST",
			data:{
				a_id:a_id
			},
			dataType:"json",
			success:function(data){
				alert(data);
				window.location.reload();
			},
			error:function(data){
				alert("删除失败");
			}
		});
	}
	
	

	//展示方法，同样也是查询方法 
	function showHolidays(pageIndex) {
		var startTime = $("#qstarttime").val();
		var endTime = $("#qendtime").val();
		var d1 = Date.parse(startTime);
		var d2 = Date.parse(endTime);
		var date = d2 - d1;
		var time = 60 * 60 * 1000;
		if (date < 0 || date < time) {
			alert("结束时间不能先于开始时间且间隔必须在一小时以上！");
			return;
		}
		//关闭查询框
		if (queryHol.style.display == 'block') {
			queryHol.style.display = 'none';
		}
		$.ajax({
					url : "/getApprovalInfo",
					type : "POST",
					data : {
						pageIndex : pageIndex,
						a_type:$("#a_type").val(),
						/* name : $("#empName").val(), */
						ht_id : $("#qht_id").val(),
						starttime : $("#qstarttime").val(),
						endtime : $("#qendtime").val(),
						reason : $("#qreasoninput").val(),
						a_state : $("#aps_id").val(),
						c_time : $("#c_time").val()
					},
					dataType : "json",
					success : function(data) {
						var content = "";
						content += "<table class='table table-bordered' style='margin-top: 20px;'>"
								+ "<thead>"
								+ "<tr>"
								+ "<th>姓名</th>"
								+ "<th>请假类型</th>"
								+ "<th>开始时间</th>"
								+ "<th>结束时间</th>"
								+ "<th>请假原因</th>"
								+ "<th>审批状态</th>"
								+ "<th style='width: 150px;'>操作</th>"
								+ "</tr>"
								+ "</thead>" + "<tbody>";
						for (var i = 0; i < data.beanList.length; i++) {
							/* alert(data.beanList[i].holiday.reason); */
							content += "<tr class='success'>" + "<td>"
									+ data.beanList[i].emp.name
									+ "</td>"
									+ "<td>"
									+ data.beanList[i].holiday.holidayType.ht_name
									+ "</td>"
									+ "<td>"
									+ data.beanList[i].holiday.starttime
									+ "</td>"
									+ "<td>"
									+ data.beanList[i].holiday.endtime
									+ "</td>"
									+ "<td>"
									+ data.beanList[i].holiday.reason
									+ "</td>"
									+ "<td>"
									+ data.beanList[i].stateName
									+ "</td><td>"
									if(data.beanList[i].stateName=="未审批"){
										content+="<a href='javascript:openModifyView("+data.beanList[i].holiday.h_id+",\""+data.beanList[i].a_eid+"\",\""+data.beanList[i].holiday.holidayType.ht_id+"\",\""+data.beanList[i].holiday.starttime+"\",\""+data.beanList[i].holiday.endtime+"\",\""+data.beanList[i].holiday.reason+"\")' class='btn btn-primary btn'>修改</a>";
									}
									content+= "<a href='javascript:deleteHoliday("
									+ data.beanList[i].a_id
									+ ")' class='btn btn-primary btn'>删除</a></td>"
									+ "</tr>"
						}
						content += "</tbody></table>";
						content+='<div style="margin: 0 auto;">';
						if (data.pageIndex > 6) {
							content += '<a href="javascript:showHolidays(1)">首页</a>&nbsp;&nbsp;'
						}
						if (data.pageIndex > 1) {
							content += '<a href="javascript:showHolidays('
									+ (data.pageIndex - 1) + ')">上一页 </a>&nbsp;&nbsp;';
						}
						for (var i = data.pageBegin; i <= data.pageEnd; i++) {
							if (data.pageIndex == i) {
								content += '[' + i + ']&nbsp;&nbsp;';
							} else if (data.pageIndex != i) {
								content += '<a href="javascript:showHolidays('
										+ i + ')">[' + i + ']</a>&nbsp;&nbsp;';
							}
						}
						if (data.pageIndex < data.totalPage) {
							content += '<a style="text-decoration:none;" href="javascript:showHolidays('
									+ (data.pageIndex + 1) + ')">下一页</a>&nbsp;&nbsp;';
						}
						if (data.pageIndex < (data.totalPage - 4)) {
							content += '<a href="javascript:showHolidays('
									+ data.totalPage + ')">末页 </a><br />';
						}
						content+='</div> ';
						content += '<br /> 第' + data.pageIndex + '页，共'
								+ data.totalPage + '页';
						
						$("#holidays").html(content);
					},
					error : function(data) {
						alert("失败");
					}
				});
	}
	

	//打开关闭查询窗口
	var queryHol = document.getElementById("holidayQueryModel");
	function changeHolidayState() {
		//关闭其他的窗口
		if(bc.style.display == 'block'){
			changeState();
		}
		if(modifyHol.style.display == 'block'){
			changeMState();
		}
		
		if (queryHol.style.display == 'none') {
			queryHol.style.display = 'block';
		} else {
			queryHol.style.display = 'none';
		}
	}

	//非空检查方法
	function validate_required(field, alerttxt) {
		with (field) {
			if (value == null || value == "") {
				alert(alerttxt);
				return false
			} else {
				return true
			}
		}
	}
	/* 
	请假申请之前的格式检查：
	全部参数不能为空
	开始时间和结束时间是否合理（大于一小时） */
	function validate_form(thisform) {
		with (thisform) {
			if (validate_required(a_eid, "审批人不能为空!") == false) {
				a_eid.focus();
				return false
			}
			if (validate_required(ht_id, "请假类型不能为空!") == false) {
				ht_id.focus();
				return false
			}
			if (validate_required(starttime, "开始时间不能为空!") == false) {
				starttime.focus();
				return false
			}
			if (validate_required(endtime, "结束时间不能为空!") == false) {
				endtime.focus();
				return false
			}
			if (validate_required(reason, "请假原因不能为空!") == false) {
				reason.focus();
				return false
			}
			var startTime = $("#starttime").val();
			var endTime = $("#endtime").val();
			var d1 = Date.parse(startTime);
			var d2 = Date.parse(endTime);
			var date = d2 - d1;
			var time = 60 * 60 * 1000;
			if (date < 0 || date < time) {
				alert("结束时间不能先于开始时间且间隔必须在一小时以上！");
				return false;
			}
		}
	}

	//开始时间选择
	laydate.render({
		elem : '#starttime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	laydate.render({
		elem : '#qstarttime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	laydate.render({
		elem : '#mstarttime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	laydate.render({
		elem : '#c_time'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	//结束时间选择
	laydate.render({
		elem : '#endtime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	laydate.render({
		elem : '#qendtime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	laydate.render({
		elem : '#mendtime'//指定元素
		,
		format : 'yyyy-MM-dd HH:mm:ss'
	});
	

	//打开、关闭申请框
	var bc = document.getElementById("holidayDivModel");
	function changeState() {
		//先检查 查询 和 修改 是不是打开的，是的话关闭
		if(queryHol.style.display == 'block'){
			changeHolidayState();
		}
		if(modifyHol.style.display = 'block'){
			changeMState();
		}
		
		
		if (bc.style.display == 'none') {
			bc.style.display = 'block';
		} else {
			bc.style.display = 'none';
		}
	}

	//查询审批人
	var personIsOk = true;
	function showApprovalPersons() {
		/* if (personIsOk) { */
		$.ajax({
			url : "/findApprovalPersons",
			success : function(data) {

				var obj = $("#a_eid");
				var obj1 = $("#ma_eid");
				/* obj.empty(); */
				for (var i = 0; i < data.length; i++) {
					obj.append("<option value='"+data[i].id+"'>" + data[i].name
							+ "</option>");
					obj1.append("<option value='"+data[i].id+"'>" + data[i].name
							+ "</option>");
				}
				personIsOk = false;
			},
			error : function(data) {
				alert(error);
			}
		});
		/* } */

	}

	//查询请假类型
	var typeIsOk = true;
	function showHolidayTypes() {
		/* if (typeIsOk) { */
		$.ajax({
			url : "/holiday/getHType",
			success : function(data) {
				var obj = $("#ht_id");
				var obj1 = $("#qht_id");
				var obj2 = $("#mht_id");
				/* obj.empty(); */
				for (var i = 0; i < data.length; i++) {
					obj.append("<option value='"+data[i].ht_id+"'>"
							+ data[i].ht_name + "</option>");
					obj1.append("<option value='"+data[i].ht_id+"'>"
							+ data[i].ht_name + "</option>");
					obj2.append("<option value='"+data[i].ht_id+"'>"
							+ data[i].ht_name + "</option>");
				}
				typeIsOk = false;
			},
			error : function(data) {
				alert(error);
			}
		});
		/* 	} */

	}
</script>
</html>